<template>
    <mavon-editor class="markdown" 
    ref="myEditor"
    v-model="markdownContent" 
    :language="language"
    :font-size="fontSize"
    :scroll-style="scrollStyle"
    :box-shadow="boxShadow"
    :box-shadow-style="boxShadowStyle"
    :transition="transition"
    :toolbars-background="toolbarsBackground"
    :preview-background="previewBackground"
    :subfield="subfield"
    :default-open="defaultOpen"
    :placeholder="placeholder"
    :editable="editable"
    :code-style="codeStyle"
    :toolbars-flag="toolbarsFlag"
    :navigation="navigation"
    :short-cut="shortCut"
    :autofocus="autofocus"
    :ishljs="ishljs"
    :image-filter="imageFilter"
    :image-click="imageClick"
    :tab-size="tabSize"
    :html="html"
    :xss-options="xssOptions"
    :toolbars="toolbars"
    @change="handleChange" 
    @save="handleSave"
    @fullScreen="handleFullScreen" 
    @readModel="handleReadModel"
    @htmlCode="handleHtmlCode" 
    @subfieldToggle="handleSubfieldToggle" 
    @previewToggle="handlePreviewToggle"
    @helpToggle="handleHelpToggle"
    @navigationToggle="handleNavigationToggle" 
    @imgAdd="handleImageAdd"
    @imgDel="handleImageDelete">
        <!-- 左工具栏前加入自定义按钮 -->
        <template slot="left-toolbar-before">
            <button type="button" @click="$click('test')" class="op-icon fa fa-mavon-align-left" aria-hidden="true"
                title="自定义"></button>
        </template>
        <!-- 左工具栏后加入自定义按钮  -->
        <template slot="left-toolbar-after">
            <button type="button" @click="$click('test')" class="op-icon fa fa-mavon-align-left" aria-hidden="true"
                title="自定义"></button>
        </template>
        <!-- 右工具栏前加入自定义按钮  -->
        <template slot="right-toolbar-before">
            <button type="button" @click="$click('test')" class="op-icon fa fa-mavon-align-left" aria-hidden="true"
                title="自定义"></button>
        </template>
        <!-- 右工具栏后加入自定义按钮  -->
        <template slot="right-toolbar-after">
            <button type="button" @click="$click('test')" class="op-icon fa fa-mavon-align-left" aria-hidden="true"
                title="自定义"></button>
        </template>
    </mavon-editor>
</template>

<script>
import Vue from "vue";
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";

Vue.component("mavon-editor", mavonEditor);

export default {
    data() {
        return {
            markdownContent: '', // 这里是绑定的Markdown内容
            language: "zh-CN", //语言选择，暂支持 zh-CN: 简体中文, zh-TW: 正体中文 ， en: 英文 ， fr: 法语， pt-BR: 葡萄牙语， ru: 俄语， de: 德语， ja: 日语 |
            fontSize: "14px", //编辑区域文字大小
            scrollStyle: true, // 开启滚动条样式(暂时仅支持chrome)
            boxShadow: true, // 开启边框阴影
            boxShadowStyle: "0 2px 12px 0 rgba(0, 0, 0, 0.1)", // 边框阴影样式
            transition: true, // 是否开启过渡动画
            toolbarsBackground: "#ffffff", // 工具栏背景颜色
            previewBackground: "#fbfbfb", // 预览框背景颜色
            subfield: true, // true： 双栏(编辑预览同屏)， false： 单栏(编辑预览分屏)
            defaultOpen: "preview", // 在单栏（`subfield=false`）时默认展示区域. edit： 默认展示编辑区域， preview： 默认展示预览区域 其他 = edit
            placeholder: "开始编辑...", // 输入框为空时默认提示文本
            editable: true, // 是否允许编辑
            codeStyle: "code-github", // markdown样式： 默认github, [可选配色方案](/mavonEditor/src/lib/core/hljs/lang.hljs.css.js)
            toolbarsFlag: true, // 工具栏是否显示
            navigation: false, // 默认展示目录
            shortCut: true, // 是否启用快捷键
            autofocus: true, // 自动聚焦到文本框
            ishljs: true, // 代码高亮
            imageFilter: null, // 图片过滤函数，参数为一个`File Object`，要求返回一个`Boolean`, `true`表示文件合法，`false`表示文件不合法
            imageClick: null, // 图片点击事件，默认为预览，可覆盖
            tabSize: "\t", // tab转化为几个空格，默认为\t
            html: true, // 启用HTML标签，因为历史原因这个标记一直默认为true，但建议不使用HTML标签就关闭它，它能彻底杜绝安全问题。
            xssOptions: {}, // xss规则配置, 默认开启，设置false可以关闭，开启后会对HTML标签进行过滤，默认过滤所有HTML标签属性，建议按需配置白名单减少被攻击的可能。- 自定义规则参考: [https://jsxss.com/zh/options.html](https://jsxss.com/zh/options.html)- 参考DEMO: [dev-demo](/mavonEditor/src/dev/editor.vue)
            toolbars: {  // 工具栏显示那些工具
                bold: true, // 粗体
                italic: true, // 斜体
                header: true, // 标题
                underline: true, // 下划线
                strikethrough: true, // 中划线
                mark: true, // 标记
                superscript: true, // 上角标
                subscript: true, // 下角标
                quote: true, // 引用
                ol: true, // 有序列表
                ul: true, // 无序列表
                link: true, // 链接
                imagelink: true, // 图片链接
                code: true, // code
                table: true, // 表格
                fullscreen: true, // 全屏编辑
                readmodel: true, // 沉浸式阅读
                htmlcode: true, // 展示html源码
                help: true, // 帮助
                /* 1.3.5 */
                undo: true, // 上一步
                redo: true, // 下一步
                trash: true, // 清空
                save: true, // 保存（触发events中的save事件）
                /* 1.4.2 */
                navigation: true, // 导航目录
                /* 2.1.8 */
                alignleft: true, // 左对齐
                aligncenter: true, // 居中
                alignright: true, // 右对齐
                /* 2.2.1 */
                subfield: true, // 单双栏模式
                preview: true, // 预览
            },
            contentArray: [],
            index:0,
        };
    },
    mounted() {
        // 假设这个方法是用来获取Markdown内容的
        this.fetchMarkdownData();
    },
    methods: {
        fetchMarkdownData() {
            this.markdownContent = '# Hello Markdown\n这里是Markdown的示例内容\n';

        },
        handleChange(value, render) {
            // 定义正则表达式
            // var regex = /!\[([^\[\]]+)\]\(([^)]+)\)/g;
            // this.contentArray[this.index] = value.match(regex);
            // var curImage = this.contentArray[this.index]
            // var preImage =this.contentArray[(this.index+1)%2]
            // this.index=(this.index+1)%2
            // console.log(curImage);
            // console.log(preImage);
            // //新增的图片
            // console.log(this.difference(curImage,preImage));
            // //删除的图片
            // console.log(this.difference(preImage,curImage));
        },
        difference(arr1, arr2) {
            return arr1.filter(value => !arr2.includes(value));
        },
        handleSave(value, render) {
            console.log("保存内容:", value);
            console.log("Markdown 解析结果:", render);
        },
        handleFullScreen(status, value) {
            console.log("全屏编辑状态:", status);
            console.log("Markdown 解析结果:", value);
        },
        handleReadModel(status, value) {
            console.log("沉浸式阅读状态:", status);
            console.log("Markdown 解析结果:", value);
        },
        handleHtmlCode(status, value) {
            console.log("查看 HTML 源码状态:", status);
            console.log("Markdown 解析结果:", value);
        },
        handleSubfieldToggle(status, value) {
            console.log("单双栏编辑状态:", status);
            console.log("Markdown 解析结果:", value);
        },
        handlePreviewToggle(status, value) {
            console.log("预览编辑状态:", status);
            console.log("Markdown 解析结果:", value);
        },
        handleHelpToggle(status, value) {
            console.log("帮助开启状态:", status);
            console.log("Markdown 解析结果:", value);
        },
        handleNavigationToggle(status, value) {
            console.log("导航目录开启状态:", status);
            console.log("Markdown 解析结果:", value);
        },
        async handleImageAdd(pos, file) {
            // let tempUrl=null;
            // try {
            //     // 创建FormData对象并添加文件
            //     let formData = new FormData();
            //     formData.append('image', file);

            //     // 发送图片到服务器
            //     const response = await fetch('http://localhost:3000/upload-image', {
            //         method: 'POST',
            //         body: formData
            //     });

            //     // 检查响应是否成功
            //     if (!response.ok) {
            //         throw new Error('图片上传失败');
            //     }

            //     // 假设服务器返回的数据中有图片的URL
            //     const data = await response.json();
            //     tempUrl = data.imageUrl;
            //     // 使用 $img2Url 方法将返回的url替换到文本原位置
            //     this.$refs.myEditor.$img2Url(pos, tempUrl);
            // } catch (error) {
            //     console.error('图片上传失败', error);
            // }
        },

        handleImageDelete(pos, imgFile) {
            console.log("删除图片，位置:", pos);
            console.log("图片文件:", imgFile);
        },
        async uploadImage() {
            const formData = new FormData();
            formData.append('image', this.selectedFile);
            
        },
    }
}
</script>

<style scoped>
.markdown {
    width: 100%;
    margin: 0 auto;
}
</style>